<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <div class="addButton" v-if="activeNum == 1">
          <el-button type="primary" size="small" @click="addData()">添加</el-button>
        </div>
      </div>
      <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" :before-leave="Tabever">
          <el-tab-pane label="综合排名" name="first">
            <div class="searchList">
              <div class="nav">
                <div class="selecr">
                  <span>年份:</span>
                  <el-date-picker
                    v-model="year"
                    type="year"
                    placeholder="选择年"
                    size="small"
                    value-format="yyyy"
                  ></el-date-picker>
                </div>
                <div>
                  <span>上下半年：</span>
                  <el-select v-model="timeNode" placeholder="请选择" size="small">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
                <el-button type="primary" size="small" @click="getrankingData()">搜索</el-button>
              </div>
            </div>
            <div>
              <el-scrollbar class="page-component__scroll" style="height:100%">
                <div style="height:600px;">
                  <el-table
                    border
                    :data="rankingData"
                    style="width:65%"
                    :header-cell-style="{ background: '#f5f5f5' }"
                    height="600"
                  >
                    <el-table-column prop="taskName" label="十项重点工作" align="center"></el-table-column>
                    <el-table-column prop="scoreSum" label="排名总得分" width="130" align="center"></el-table-column>
                    <el-table-column prop="scoreAvg" label="排名平均分" width="130" align="center"></el-table-column>
                    <el-table-column prop="rank" label="排名" width="130" align="center"></el-table-column>
                  </el-table>
                </div>
              </el-scrollbar>
            </div>
          </el-tab-pane>
          <el-tab-pane label="离均差" name="second">
            <div class="searchList">
              <div class="nav">
                <div>
                  <span>年份:</span>
                  <el-date-picker
                    v-model="year"
                    type="year"
                    placeholder="选择年"
                    size="small"
                    value-format="yyyy"
                  ></el-date-picker>
                </div>
                <div>
                  <span>上下半年：</span>
                  <el-select v-model="timeNode" placeholder="请选择" size="small">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
                <el-button type="primary" size="small" @click="getdeviationData()">搜索</el-button>
                <div></div>
              </div>
              <!-- <el-button type="primary" size="small" @click="addNumber()">添加</el-button> -->
            </div>
            <el-scrollbar class="page-component__scroll" style="height:100%">
              <div style="height:600px;">
                <el-table
                  border
                  :data="deviationData"
                  style="width: 50%"
                  align="center"
                  :header-cell-style="{ background: '#f5f5f5' }"
                  height="600"
                >
                  <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
                  <el-table-column prop="meanDevSum" label="总偏差" align="center"></el-table-column>
                  <el-table-column prop="rank" label="排名" align="center"></el-table-column>
                </el-table>
              </div>
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane label="基础数据" name="theer">
            <div class="searchList">
              <div class="nav">
                <div>
                  <span>年份:</span>
                  <el-date-picker
                    v-model="year"
                    type="year"
                    placeholder="选择年"
                    size="small"
                    value-format="yyyy"
                  ></el-date-picker>
                </div>
                <div>
                  <span>上下半年：</span>
                  <el-select v-model="timeNode" placeholder="请选择" size="small">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
                <el-button type="primary" size="small" @click="getfileList()">搜索</el-button>
              </div>
            </div>
            <el-scrollbar class="page-component__scroll" style="height:100%">
              <div style="height:600px;">
                <el-table
                  border
                  :data="list"
                  style="width: 100%"
                  align="center"
                  :header-cell-style="{ background: '#f5f5f5' }"
                  height="600"
                >
                  <el-table-column type="index" label="序号" align="center"></el-table-column>
                  <el-table-column
                    prop="bunen"
                    :label="tableHeader.bumen"
                    width="100%"
                    align="center"
                  ></el-table-column>
                  <!-- <el-table-column
                  prop="id"
                  :label="tableHeader.id"
                  width="100%"
                  align="center"
                  ></el-table-column>-->
                  <el-table-column
                    align="center"
                    v-for="(item, i) in tableHeader.yuefen"
                    :key="i"
                    :label="item.title"
                    :prop="item.value"
                  ></el-table-column>
                  <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                      <!-- <el-button type="text" @click="eitdBaseData(scope.row)">编辑</el-button> -->
                      <el-button type="text" @click="delBaseData(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-scrollbar>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 基础数据添加修改弹框 -->
      <el-dialog
        title="基础数据管理"
        :visible.sync="DatadialogVisible"
        width="60%"
        :before-close="handleClose"
        :close-on-click-modal="false"
      >
        <el-form ref="taskRef" :model="BasicData" label-width="200px">
          <el-form-item prop="year" label="年份" style="width:48%;display: inline-block;">
            <el-date-picker
              v-model="BasicData.year"
              type="year"
              style="width:70%;"
              placeholder="选择年"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="TopBotyear" label="上下半年" style="width:48%;display: inline-block;">
            <el-select v-model="BasicData.timeNode" style="width:70%;" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="name" label="姓名" style="width:48%; display: inline-block;">
            <el-input v-model="BasicData.name" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item
            prop="year"
            v-for="(item, i) in tableHeader.yuefen"
            :key="i"
            :label="item.title"
            style="width:48%;display: inline-block;"
          >
            <el-input
              type="text"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              v-model="item.data"
              style="width:70%;"
            ></el-input>
          </el-form-item>
          <el-form-item style="width:100%">
            <el-button class="saveBtn" type="primary" @click="submitForm()">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: "",
      year: "2020", //年份
      timeNode: "1", //上下半年
      activeName: "first",
      tableData: [],
      rankingData: [],
      deviationData: [],
      options: [
        {
          value: "1",
          label: "上半年",
        },
        {
          value: "2",
          label: "下半年",
        },
      ],
      tableHeader: {
        id: "",
        bumen: "姓名",
        yuefen: [],
      },
      list: [],
      DatadialogVisible: false, //基础数据弹框
      BasicData: {
        //基础数据
        id: "",
        name: "",
        year: "2020",
        data: [],
        timeNode: "1",
      },
      activeNum: false,
    };
  },
  mounted() {
    this.hetTable();
    this.getfileList();
    this.getrankingData();
  },
  methods: {
    // 基础数据添加框
    addData() {
      this.tableHeader.yuefen.forEach((i) => {
        i.data = "";
      });
      this.BasicData.name = "";
      console.log(this.tableHeader.yuefen);
      this.DatadialogVisible = true;
    },
    // 基础数据关闭框
    handleClose(done) {
      this.DatadialogVisible = false;
      this.tableHeader.yuefen = [];
      this.BasicData.data = [];
      this.getfileList();
      this.hetTable();
    },
    // 编辑按钮
    eitdBaseData(data) {
      this.DatadialogVisible = true;
      console.log(data);
      this.BasicData.id = data.id;
      this.BasicData.name = data.bunen;
      this.tableHeader.yuefen.forEach((i) => {
        i.data = data[i.value];
      });
      console.log(this.tableHeader.yuefen);
    },
    delBaseData(data) {
      this.$axios
        .post("/OfficialBaseData/remove", { meanDevId: data.id }, 2)
        .then((res) => {
          if (res.code == 200) {
            this.$message(res.msg);
            this.getfileList(false);
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    // 基础数据保存接口
    submitForm() {
      let postData = {
        year: this.BasicData.year,
        timeNode: this.BasicData.timeNode,
        name: this.BasicData.name,
      };
      let arr = [];
      let isFlag = true;
      this.tableHeader.yuefen.forEach((i) => {
        if (i.data == "") {
          isFlag = false;
        }
        arr.push({ taskId: i.id, score: i.data });
      });
      if (isFlag == false) {
        this.$message.error(`请填写完所有的输入框`);
        return;
      }
      postData["data"] = arr;
      if (this.BasicData.id == "") {
        this.$axios.post("/OfficialBaseData/add", postData).then((res) => {
          if (res.code == 200) {
            // this.$message(res.msg);
            this.$message({
              message: "数据更新成功",
              type: "success",
            });
            this.getfileList(false);
            this.DatadialogVisible = false;
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        postData["id"] = this.BasicData.id;
        this.$axios.post("/OfficialBaseData/update", postData).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "数据更新成功",
              type: "success",
            });
            this.getfileList(false);
            this.DatadialogVisible = false;
          } else {
            this.$message.error(res.msg);
          }
        });
      }
      console.log(postData);
    },
    // 打分
    getfileList(val) {
      this.$axios
        .post("/OfficialBaseData/getBaseDataList", {
          year: this.year,
          timeNode: this.timeNode,
        })
        .then((res) => {
          if (res.code == 200) {
            let data = res.data;
            let array = [];
            let obj = [];
            data.forEach((i, key) => {
              array.push({ bunen: i.userName, id: i.id });
              i.data.forEach((j, index) => {
                array[key][`${"index" + index}`] = j.score;
              });
            });
            console.log(array);
            this.list = array;
          } else {
            this.$message.error(`${res.msg}`);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 排名数据
    getrankingData() {
      let _obj = {
        year: this.year,
        timeNode: this.timeNode,
      };
      this.$axios.post("/OfficialComRank/getList", _obj).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.rankingData = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 离均差数据
    getdeviationData() {
      let _obj = {
        year: this.year,
        timeNode: this.timeNode,
      };
      this.$axios.post("/OfficialMeanDevRank/getList", _obj).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.deviationData = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //  切换数据
    Tabever(activeName, oldActiveName) {
      if (activeName == "first") {
        this.getrankingData();
        this.activeNum = false;
      } else if (activeName == "second") {
        this.getdeviationData();
        this.activeNum = false;
      } else if (activeName == "theer") {
        this.getfileList(false);
        this.activeNum = true;
      }
    },
    hetTable() {
      this.$axios
        .post(`/task/getAllList`)
        .then((res) => {
          if (res.code == 200) {
            let arr = [];
            let arr1 = [];
            console.log(res, "res");
            res.data.forEach((i, index) => {
              // if (i.children && i.children.length == 0) {
              arr.push({
                title: i.title,
                value: `${"index" + index}`,
                data: "",
                id: `${i.id}`,
              });
              // } else {
              //   i.children.forEach((item, key) => {
              //     arr1.push({
              //       title: item.title,
              //       value: `${"index"}${index + 1 + key}`,
              //       data: "",
              //       id: `${item.id}`,
              //     });
              //   });
              // }
            });
            // this.tableHeader.yuefen = arr.concat(arr1);
            this.tableHeader.yuefen = arr;
            console.log(this.tableHeader.yuefen);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  components: {},
};
</script>
<style scoped>
.parcel,
.parcelTow {
  width: 100%;
  overflow: auto;
}
.parcel > table {
  width: 2500px;
}
.searchList {
  text-align: right;
  margin-bottom: 10px;
}
.filling {
  font-size: 12px;
  border: 0px;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.addData {
  margin-top: 5px;
  margin-bottom: 5px;
  float: right;
}
.nav {
  /* float: left; */
  width: 80%;
  margin-bottom: 20px;
  text-align: left;
  display: flex;
  justify-content: left;
}
.nav .el-button {
  margin-left: 20px;
}
table,
table tr th,
table tr td {
  border: 1px solid #ccc;
}
table {
  line-height: 25px;
  text-align: center;
  border-collapse: collapse;
}
.icon-bukejian {
  color: #909399;
}
.saveBtn {
  width: 55%;
  margin-left: 12%;
}
.addButton {
  float: right;
}
.userIntSize {
  width: 80% !important;
}
</style>
